/<template>
  <div>
      <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
      </div>
      <div class="box">
          <div class="left">
                <van-sidebar v-model="activeKey" @change="todo">
                    <van-sidebar-item v-for="item,i in $store.state.list" :key="i" :title="item.title" />
                </van-sidebar>
          </div>
          <div class="right">
                <div class="'card" v-for="item,i in $store.state.listChildren" :key="i" @click="showPopup">
                    <van-popup v-model="show">
                        <van-card
                            num="2"
                            :price="item.price"
                            desc="描述信息"
                            :title="item.name"
                            :thumb="item.img"
                        >
                            <template #footer>
                                <van-button size="mini">X</van-button>
                            </template>
                        </van-card>
                    </van-popup>
                    <van-card
                        num="2"
                        :price="item.price"
                        desc="描述信息"
                        :title="item.name"
                        :thumb="item.img"
                    >
                        <template #footer>
                            <van-button size="mini">X</van-button>
                        </template>
                    </van-card>
                </div>
          </div>
          <van-popup v-model="show" get-container=".card" />
          
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
import axios from "axios";
import { Card } from 'vant';
import { Popup ,Button} from 'vant';

Vue.use(Popup,Button);
Vue.use(Card);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data() {
        return {
            activeKey: 0,
            show: false,
        };
    },
    mounted() {
        axios.get("/list").then(res=>{
            this.$store.commit('setList', res.data),
            this.$store.commit('setListChildren', res.data[0].children)
        })
    },
    methods: {
        todo() {
            this.$store.commit('setListChildren', this.$store.state.list[this.activeKey].children)
        },
        showPopup() {
            this.show = true;
        },
    },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
body,html,#app{
    width: 100%;
    height: 100%;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.box{
    width: 100%;
    height: 465px;
}
.left{
    float: left;
    width: 90px;
    height: 100%;
}
.right{
    width: 285px;
    height: 100%;
    float: left;
}
</style>